<template>
  <entity-view
    form-item-width="33.33%"
    @submit="submit"
    ref="form"
    :model="beanInfo"
    :rules="rules"
  >
    <div class="subtitle">通道基本信息</div>
    <div class="sub-content-flex">
      <form-item
        label="机构标识"
        v-model="beanInfo.instId"
        prop="instId"
        disabled
      ></form-item>
      <form-item
        label="通道标识"
        v-model="beanInfo.dstChannelId"
        prop="dstChannelId"
        disabled
        ></form-item>
      <form-item
        label="通道名称"
        v-model="beanInfo.dstChannelName"
        prop="dstChannelName"
      ></form-item>
      <form-item
        label="通道最大并发数(笔)"
        v-model="beanInfo.maxSupportNum"
        prop="maxSupportNum"
        ></form-item>
      <form-item
        label="支付通道延时类型"
        inputType="select"
        v-model="beanInfo.txnDelayType"
        prop="txnDelayType"
        :options="txnDelayTypeList"
        @change="value => handleChange(value,'txnDelayType')"
        ></form-item>
      <a-form-model-item
        style="width: 100%"
        label="支持账户类型"
        prop="supportAcctType"
        :options="supportAcctTypeList"
        ref="supportAcctTypeListFormItem"
        :auto-link="false"
        @change="supportAcctTypeChange">
        <a-checkbox
          class="checkAll"
          :checked="checkAll"
          @change="onCheckAllChange"
          >全选</a-checkbox
        >
        <a-checkbox-group
          class="check-box-group"
          prop="supportAcctType"
          v-model="beanInfo.supportAcctType"
          :options="supportAcctTypeList"
          :disabled="operatorType === 'view' || operatorType === 'delete'"
          @change="supportAcctTypeChange"
        >
        </a-checkbox-group>
      </a-form-model-item>
      <form-item
        label="是否支持智能路由"
        inputType="radioGroup"
        v-model="beanInfo.intelligentRouteFlag"
        prop="intelligentRouteFlag"
        :options="intelligentRouteFlagList"
        @change="value=>handleChange(value,'intelligentRouteFlag')"
      ></form-item>
      <form-item
        label="通道通讯服务类名"
        v-model="beanInfo.dstServiceName"
        prop="dstServiceName"
      ></form-item>
      <form-item
        label="通道状态"
        inputType="select"
        v-model="beanInfo.dstChannelStatus"
        prop="dstChannelStatus"
        :options="dstChannelStatusList"
        @change="value=>handleChange(value,'dstChannelStatus')"
      ></form-item>
      <form-item
        label="熔断控制开关"
        inputType="select"
        v-model="beanInfo.fusingEnableFlag"
        prop="fusingEnableFlag"
        :options="fusingEnableFlagList"
        @change="value=>handleChange(value,'fusingEnableFlag')"
      ></form-item>
<!--      <form-item-->
<!--                v-if="operatorType === 'view'"-->
<!--                inputType="textarea"-->
<!--                label="停用原因"-->
<!--                v-model="beanInfo.stopReason"-->
<!--                prop="stopReason"-->
<!--              ></form-item>-->
    </div>
    <div class="btn-wrapper">
      <a-button type="primary" html-type="submit" @click="nextOne">下一步</a-button>
      <a-button @click="close">取消</a-button>
    </div>
  </entity-view>
</template>

<script>
import EntityView from "../../../../components/common/entityView/EntityView";
import FormItem from "../../../../components/common/entityView/FormItem";
import PDstChannel from "./PDstChannel";
export default {
  name: "BaseInfoForm",
  components: { EntityView, FormItem ,PDstChannel},
  inject: ["PDstChannelContext","operationContext"],
  data: function () {
    return {
      pageInfo: {
        mchntType: "",
      },
      beanInfo: {},
       txnDelayTypeList: [
        { value: 1, name: "实时到账" },
        { value: 2, name: "普通到账" },
        { value: 3, name: "24小时到账" },
      ],
      intelligentRouteFlagList: [
        { value: "Y", label: "是" },
        { value: "N", label: "否" },
      ],
      dstChannelStatusList: [
        { value: "Y", name: "启用" },
        { value: "N", name: "停用" },
      ],
      fusingEnableFlagList: [
        { value: "Y", name: "开启" },
        { value: "N", name: "关闭" },
      ],
      rules: {
        instId: [{ required: true, message: "必填", trigger: "blur" }],
        dstChannelName: [{ required: true, message: "必填", trigger: "blur" }],
        supportAcctType: [{ required: true, message: "必填", trigger: "change" }],
        intelligentRouteFlag: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        dstServiceName: [{ required: true, message: "必填", trigger: "blur" }],
        dstChannelStatus: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        fusingEnableFlag: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        stopReason: [{ required: true, message: "必填", trigger: "blur" }],
      },
      supportAcctTypeList: [],
      supportAcctTypeChecked: [],
      checkAll: false,
      operatorType:''
    };
  },
  methods: {
    async getList() {
      try {
        const res = await this.$get("/admin/igas/pDstChannelInfo/edit", {
          instId: this.PDstChannelContext.beanInfo.instId,
          dstChannelId: this.PDstChannelContext.beanInfo.dstChannelId,
          optFlag: "upd",
        });
        if (res.status === 200) {
          this.supportAcctTypeList = res.data.accTypes.filter((i) => {
            return i.value !== "*";
          });
          this.beanInfo=res.data.entity
          if (this.beanInfo.supportAcctType=='*'){
            this.checkAll=true
          }
          this.$set(this.beanInfo, 'supportAcctType', res.data.entity.supportAcctTypeList)

        } else {
          this.loading = false;
          this.$message.error(res.data.message);
        }
      } catch (e) {
        console.error(e);
      }
    },
    close(){
      this.PDstChannelContext.modalVisible=false;
    },
     supportAcctTypeChange(value) {
      this.indeterminate =
        !!value.length && value.length < this.supportAcctTypeList.length;
      this.checkAll = value.length === this.supportAcctTypeList.length;
      this.$refs.supportAcctTypeListFormItem.onFieldChange()
    },
    // onCheckAllChange(e) {
    //   Object.assign(this, {
    //     supportAcctTypeChecked: e.target.checked ? this.supportAcctTypeList : [],
    //     indeterminate: false,
    //     checkAll: e.target.checked,
    //   });
    // },
    onCheckAllChange(e) {
      if (this.checkAll == true){
        this.beanInfo.supportAcctType = [];
        this.checkAll = false;
      }else {
        for (var i in this.supportAcctTypeList){
          var supportAcctTypeData =  this.supportAcctTypeList[i].value;
          var type = true;
          for (var j in  this.beanInfo.supportAcctType){
            if ( supportAcctTypeData ==  this.beanInfo.supportAcctType[j]){
              type = false;
              break;
            }
          }
          if (type){
            this.beanInfo.supportAcctType.push(supportAcctTypeData)
          }
        }
        this.checkAll = true;
      }
    },
     handleChange(value,param) {
      this.beanInfo[param] = value;
    },
    submit() {
      this.$emit("submit", ...arguments);
    },
    resetFields() {
      return this.$refs.form.resetFields();
    },
   async nextOne() {
     if (this.operationContext.operatorType == 'view') {
       const res = await this.$refs.form.validate();
       this.operationContext.tabActiveKey = "timeInfo"
     } else {
       const res = await this.$refs.form.validate();
       if (res) {
         const params = {}
         // let supportAcctType;
         this.operationContext.tabActiveKey = "timeInfo"
         // if (this.checkAll == false) {
         //   // if (this.supportAcctTypeChecked.length = 0) {
         //   //   this.operationContext.tabActiveKey = "baseInfo"
         //   //   await this.getList();
         //   //   this.$message.error('请选则支持账户类型');
         //   // } else {
         //     supportAcctType = this.supportAcctTypeChecked.join(",");
         //   // }
         // } else {
         //   supportAcctType = "*";
         // }
         Object.assign(params, this.beanInfo, {
           id: this.beanInfo.id,
           supportAcctType: this.beanInfo.supportAcctType.length === this.supportAcctTypeList.length ? '*' : this.beanInfo.supportAcctType.join(','),
           optFlag: "upd",
         });
         const res = await this.$put(
           "/admin/igas/pDstChannelInfo/update",
           params
         );
         console.log(res.data)
         if (res.status === 200) {
           this.$message.success("保存成功！");
           return true;
         } else {
           this.$message.error(res.data.message);
           return false;
         }
       }
     }
   },

  },
  async mounted() {
     // await this.getPageInfo();

     this.operatorType = this.operationContext.operatorType

  },
};
</script>

<style scoped>
.btn-wrapper {
  padding: 0 10px;
  width: 100%;
  text-align: center;
}
.subtitle {
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 0 10px;
}

.sub-content-flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.sub-content-block {
  display: block;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10px;
}
.checkAll {
  display: block;
  line-height: unset;
}
</style>
